<template>
  <div class="content">
    <h2 class="title">热门精选</h2>
      <div class="list">
        <template v-for="item in houseList" :key="item.data.houseId" >
          <houseItemType9 v-if="item.discoveryContentType === 9" :itemData="item.data"  @click="itemClick(item.data)"/>
          <houseItemType3 v-else-if="item.discoveryContentType === 3" :itemData="item.data" @click="itemClick(item.data)"/>
        </template>
      </div>
      <!-- <button @click="moreBtnClick">加载更多</button> -->
  </div>3
</template>

<script setup>
import useHomeStore from '@/stores/modules/home';
import { storeToRefs } from 'pinia';
import { watch } from 'vue';

import houseItemType9 from '@/components/house-item-v9/house-item-type9.vue';
import houseItemType3 from '@/components/house-item-v3/house-item-type3.vue';
import useScroll from '@/hooks/useScroll'
import router from '@/router';

const homeStore = useHomeStore()
homeStore.fetchHouseList()
const { houseList } = storeToRefs(homeStore) 


// const moreBtnClick = () => {
//   homeStore.fetchHouseList()
// }

//封装好的滚动监听 方法一 传入函数
// useScroll(() => homeStore.fetchHouseList())

//方法二
const { isReachBottom } = useScroll()
watch(isReachBottom, (newValue) => {
  if(newValue) {
    homeStore.fetchHouseList().then(() => isReachBottom.value = false)
  }
})

const itemClick = (data) => router.push('/detail/' + data.houseId)

</script>

<style lang="less" scoped>
.content {
  padding: 0 10px;
  margin-top: 10px;
  margin-bottom: 60px;
  .title {
    font-size: 22px;
    margin: 10px;
  }
  .list {
    display: flex;
    flex-wrap: wrap; //换行
  }
}
</style>